

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/Mine.jpg">
  <link rel="icon" href="/img/Mine.jpg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Chiam">
  <meta name="keywords" content="算法，安全">
  
    <meta name="description" content="『Web』HTML-HTML 入门篇（我想 10 分钟入门 HTML，可以，交给我吧）@[toc]我要正经的讲一节课，咳咳！  HTML 简介（废话）&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; HTML 称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HT">
<meta property="og:type" content="article">
<meta property="og:title" content="『Web』HTML-HTML入门篇（我想10分钟入门HTML，可以，交给我吧）">
<meta property="og:url" content="http://example.com/2023/12/06/%E3%80%8EWeb%E3%80%8FHTML-HTML%E5%85%A5%E9%97%A8%E7%AF%87%EF%BC%88%E6%88%91%E6%83%B310%E5%88%86%E9%92%9F%E5%85%A5%E9%97%A8HTML%EF%BC%8C%E5%8F%AF%E4%BB%A5%EF%BC%8C%E4%BA%A4%E7%BB%99%E6%88%91%E5%90%A7%EF%BC%89/index.html">
<meta property="og:site_name" content="Chiam 的个人主页">
<meta property="og:description" content="『Web』HTML-HTML 入门篇（我想 10 分钟入门 HTML，可以，交给我吧）@[toc]我要正经的讲一节课，咳咳！  HTML 简介（废话）&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; HTML 称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HT">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200405165931118.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200405170144312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1238718249,2298049977&fm=26&gp=0.jpg">
<meta property="og:image" content="http://example.com/2023/12/06/%E3%80%8EWeb%E3%80%8FHTML-HTML%E5%85%A5%E9%97%A8%E7%AF%87%EF%BC%88%E6%88%91%E6%83%B310%E5%88%86%E9%92%9F%E5%85%A5%E9%97%A8HTML%EF%BC%8C%E5%8F%AF%E4%BB%A5%EF%BC%8C%E4%BA%A4%E7%BB%99%E6%88%91%E5%90%A7%EF%BC%89/0.jpg">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200405184943653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200405190014458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200405190540484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200405190745732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70">
<meta property="og:image" content="https://img-blog.csdnimg.cn/20200405193530212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70">
<meta property="article:published_time" content="2023-12-05T16:11:43.712Z">
<meta property="article:modified_time" content="2023-12-05T16:17:51.939Z">
<meta property="article:author" content="Chiam">
<meta property="article:tag" content="算法，安全">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://img-blog.csdnimg.cn/20200405165931118.png">
  
  
  
  <title>『Web』HTML-HTML入门篇（我想10分钟入门HTML，可以，交给我吧） - Chiam 的个人主页</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  



  
<link rel="stylesheet" href="/css/custom.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.9.5-a","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":"❡"},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":2},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":{"measurement_id":null},"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml","include_content_in_search":true};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>Chiam&#39;s Blogs</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                
                <span>关于</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                
                <span>友链</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="『Web』HTML-HTML入门篇（我想10分钟入门HTML，可以，交给我吧）"></span>
          
        </div>

        
          
  <div class="mt-3">
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-12-06 00:11" pubdate>
          2023年12月6日 凌晨
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          11k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          92 分钟
        
      </span>
    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <h1 id="seo-header">『Web』HTML-HTML入门篇（我想10分钟入门HTML，可以，交给我吧）</h1>
            
            
              <div class="markdown-body">
                
                <h1 id="『Web』HTML-HTML-入门篇（我想-10-分钟入门-HTML，可以，交给我吧）"><a href="#『Web』HTML-HTML-入门篇（我想-10-分钟入门-HTML，可以，交给我吧）" class="headerlink" title="『Web』HTML-HTML 入门篇（我想 10 分钟入门 HTML，可以，交给我吧）"></a>『Web』HTML-HTML 入门篇（我想 10 分钟入门 HTML，可以，交给我吧）</h1><p>@[toc]<br><font size=6 color="	Gold" >我要正经的讲一节课，咳咳！</p>
<p><img src="https://img-blog.csdnimg.cn/20200405165931118.png" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<h4 id="HTML-简介（废话）"><a href="#HTML-简介（废话）" class="headerlink" title="HTML 简介（废话）"></a>HTML 简介（废话）</h4><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HTML 称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字，图形、动画、声音、表格、链接等。</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。</p>
<h4 id="HTML-书写规范（HTML-最小集）"><a href="#HTML-书写规范（HTML-最小集）" class="headerlink" title="HTML 书写规范（HTML 最小集）"></a>HTML 书写规范（HTML 最小集）</h4><p>以下最小的 HTML 最小集就是说，一个符合规则的 HTML 文件最小是这样子的</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs java">&lt;html&gt; 				表示整个html 页面的开始<br>	&lt;head&gt; 			头信息<br>		&lt;title&gt;		标题&lt;/title&gt; 标题<br>	&lt;/head&gt;<br>	&lt;body&gt; 			body 是页面的主体内容<br>					页面主体内容<br>	&lt;/body&gt;<br>&lt;/html&gt; 			表示整个html 页面的结束<br>&lt;!-- 我是HTML注释--&gt;<br><br></code></pre></td></tr></table></figure>

<h4 id="HTML-标签"><a href="#HTML-标签" class="headerlink" title="HTML 标签"></a>HTML 标签</h4><p><strong>1.标签的格式:</strong></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs java">&lt;标签名&gt;封装的数据&lt;/标签名&gt;<br></code></pre></td></tr></table></figure>

<p><strong>2.标签名大小写不敏感。</strong><br><strong>3.标签拥有自己的属性。</strong></p>
<ul>
<li>分为基本属性：bgcolor&#x3D;”red” 可以修改简单的样式效果</li>
<li>事件属性： onclick&#x3D;”alert(‘你好！’);” 可以直接设置事件响应后的代码。</li>
</ul>
<p><strong>4.标签又分为，单标签和双标签。</strong></p>
<ul>
<li>单标签格式： &lt;标签名&#x2F;&gt; <code>&lt;/br&gt;</code> 换行<code>&lt;/hr&gt;</code> 水平线</li>
<li>双标签格式: &lt;标签名&gt; …封装的数据…&lt;&#x2F;标签名&gt;</li>
</ul>
<p><strong>5 标签的语法：</strong></p>
<ul>
<li>双标签一定要结束</li>
<li>标签不能交叉嵌套</li>
<li>属性必须有值，属性值必须加引号</li>
<li>注释不能嵌套</li>
</ul>
<h4 id="HTML-常用标签"><a href="#HTML-常用标签" class="headerlink" title="HTML 常用标签"></a>HTML 常用标签</h4><p><strong>知道常用的就行，一般在开发过程中，都是查阅需要的标签。这点应付考试和入门绝对够用！</strong></p>
<h5 id="1-HTML-标题标签："><a href="#1-HTML-标题标签：" class="headerlink" title="1.HTML 标题标签："></a>1.HTML 标题标签：</h5><p>标题（Heading）是通过 <code>&lt;h1&gt; - &lt;h6&gt;</code> 等标签进行定义的。<br><code>&lt;h1&gt;</code> 定义最大的标题。<code>&lt;h6&gt;</code> 定义最小的标题。</p>
<p><strong>align：</strong> 属性是对齐属性</p>
<ul>
<li><strong>left：</strong> 左对齐(默认)</li>
<li><strong>center：</strong> 剧中</li>
<li><strong>right：</strong> 右对齐<body>
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<h7>标题7</h7>
</body></li>
</ul>
<p><strong>这是以上内容的代码</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span>标题1<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>标题2<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">align</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span>标题3<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h4</span>&gt;</span>标题4<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>标题5<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h6</span>&gt;</span>标题6<span class="hljs-tag">&lt;/<span class="hljs-name">h6</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">h7</span>&gt;</span>标题7<span class="hljs-tag">&lt;/<span class="hljs-name">h7</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="2-HTML-段落标签"><a href="#2-HTML-段落标签" class="headerlink" title="2.HTML 段落标签"></a>2.HTML 段落标签</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html">段落是通过<br><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>标签定义的。<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>我是第一段</p>
<p>我是第二段</p>
很明显，你看到了单独两段内容，我们给出源代码

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是第一段<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是第二段<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="3-HTML-font-字体标签"><a href="#3-HTML-font-字体标签" class="headerlink" title="3.HTML font 字体标签"></a>3.HTML font 字体标签</h5><p>font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)</p>
<ul>
<li>color 属性修改颜色</li>
<li>face 属性修改字体</li>
<li>size 属性修改文本大小</li>
</ul>
<p><font color="red" face="黑体" size="7">我是红色黑体七号字</font></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;<span class="hljs-attribute">font</span> <span class="hljs-attribute">color</span>=&quot;red&quot; face=&quot;黑体&quot; size=&quot;<span class="hljs-number">7</span>&quot;&gt;我是红色黑体七号字&lt;/<span class="hljs-attribute">font</span>&gt;<br></code></pre></td></tr></table></figure>

<p>其中还有别的属性，就不推荐大家学了，因为都淘汰了，还是使用 CSS 更佳。</p>
<h5 id="4-HTML-超链接（链接）标签"><a href="#4-HTML-超链接（链接）标签" class="headerlink" title="4.HTML 超链接（链接）标签"></a>4.HTML 超链接（链接）标签</h5><p>超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。<br><code>&lt;a&gt;标签是超链接&lt;/a&gt; </code></p>
<ul>
<li>href 属性设置连接的地址</li>
<li>target 属性设置哪个目标进行跳转</li>
<li>_self 表示当前页面(默认值)</li>
<li>_blank 表示打开新页面来进行跳转</li>
</ul>
<p>你可以先点击以下标签感受一下，我下文将会给出介绍。<br><a target="_blank" rel="noopener" href="http://www.baidu.com">百度</a><br/><br><a href="http://www.baidu.com" target="_self">百度直接跳转</a><br/><br><a href="http://www.baidu.com" target="_blank">百度新标签跳转</a><br/></p>
<p>如果你没感受出有什么差别，那么一定是你的浏览器设置的原因，我们还是给出原代码。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.baidu.com&quot;</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.baidu.com&quot;</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;_self&quot;</span>&gt;</span>百度直接跳转<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;http://www.baidu.com&quot;</span> <span class="hljs-attr">target</span>=<span class="hljs-string">&quot;_blank&quot;</span>&gt;</span>百度新标签跳转<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="5-HTML-列表标签"><a href="#5-HTML-列表标签" class="headerlink" title="5. HTML 列表标签"></a>5. HTML 列表标签</h5><p>HTML 支持有序、无序和定义列表，常用的为前两者。<br><strong>1. 无序列表</strong><br><code>&lt;ul type=&quot; xxx&quot;&gt;</code> 是无序列表 - type 属性可以修改列表项前面的符号 - li 是列表项</p>
<pre><code class="hljs">比如：
</code></pre>
<ul>
<li>赵四</li>
<li>刘能</li>
<li>小沈阳</li>
<li>宋小宝</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;none&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>赵四<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>刘能<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>小沈阳<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>宋小宝<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>2. 有序列表</strong></p>
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Coffee<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Milk<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>Tea<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>3. 定义列表</strong><br>这个真没用过，我偷个懒不讲了。<br><img src="https://img-blog.csdnimg.cn/20200405170144312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<h5 id="6-HTML-图像标签"><a href="#6-HTML-图像标签" class="headerlink" title="6.HTML 图像标签"></a>6.HTML 图像标签</h5><p><code>&lt;img  /&gt;</code>标签可以在 html 页面上显示图片。</p>
<ul>
<li>img 标签是图片标签,用来显示图片</li>
<li>src 属性可以设置图片的路径 <code>&lt;img src=&quot;url&quot; /&gt;</code></li>
<li>width 属性设置图片的宽度</li>
<li>height 属性设置图片的高度</li>
<li>border 属性设置图片边框大小</li>
<li>alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容<code>&lt;img src=&quot;boat.gif&quot; alt=&quot;Big Boat&quot;&gt;</code><br><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1238718249,2298049977&fm=26&gp=0.jpg
" srcset="/img/loading.gif" lazyload alt="Big Boat "
width="200" 
height="200"
border="2"
/></li>
</ul>
 <img  src=" 0.jpg  " srcset="/img/loading.gif" lazyload alt="我故意放错的">

<p><strong>源代码：</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;<span class="hljs-selector-tag">img</span><br><span class="hljs-attribute">src</span>=&quot;https://ss0.bdstatic.com/<span class="hljs-number">70</span>cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=<span class="hljs-number">1238718249</span>,<span class="hljs-number">2298049977</span>&amp;fm=<span class="hljs-number">26</span>&amp;gp=<span class="hljs-number">0</span>.jpg<span class="hljs-string">&quot;</span><br><span class="hljs-string">alt=&quot;</span>Big Boat <span class="hljs-string">&quot;</span><br><span class="hljs-string">width=&quot;</span><span class="hljs-number">200</span><span class="hljs-string">&quot;</span><br><span class="hljs-string">height=&quot;</span><span class="hljs-number">200</span><span class="hljs-string">&quot;</span><br><span class="hljs-string">border=&quot;</span><span class="hljs-number">2</span><span class="hljs-string">&quot; &lt;!-- 可能你看不到边框 --&gt;</span><br><span class="hljs-string">/&gt;</span><br><span class="hljs-string"></span><br><span class="hljs-string">&lt;img  src=&quot;</span> <span class="hljs-number">0</span>.jpg  <span class="hljs-string">&quot; alt=&quot;</span>我故意放错的<span class="hljs-string">&quot;&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>这里我们简单讲一下 Web 中的路径问题：</strong></p>
<p><strong>在 web 中路径分为相对路径和绝对路径两种</strong></p>
<ul>
<li>相对路径:<br><code>.</code> 表示当前文件所在的目录<br><code>..</code> 表示当前文件所在的上一级目录<br>文件名表示当前文件所在目录的文件,相当于.&#x2F;文件名.&#x2F; 可以省略</li>
<li>绝对路径:<br>正确格式是: <code>http://ip:port/工程名/资源路径</code></li>
</ul>
<h5 id="7-HTML-表格标签"><a href="#7-HTML-表格标签" class="headerlink" title="7.HTML 表格标签"></a>7.HTML 表格标签</h5><p>表格由 <code>&lt;table&gt;</code> 标签来定义。每个表格均有若干行（由 <code>&lt;tr&gt;</code> 标签定义），每行被分割为若干单元格（由 <code>&lt;td&gt;</code> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p>
<ul>
<li>border 设置表格标签</li>
<li>width 设置表格宽度</li>
<li>height 设置表格高度</li>
<li>align 设置表格相对于页面的对齐方式</li>
<li>cellspacing 设置单元格间距</li>
<li>tr 是行标签</li>
<li>th 是表头标签</li>
<li>td 是单元格标签</li>
<li>align 设置单元格文本对齐方式</li>
<li>b 是加粗标签</li>
<li>colspan 属性设置跨列</li>
<li>rowspan 属性设置跨行</li>
</ul>
<table width="500" height="500" cellspacing="1" border="2">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td colspan="2" rowspan="2">3.4</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
</tr>
</table>
 
<p>可能不是很清楚，因为markdown不能完全兼容HTM的代码，将就一下，下面是源码。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;500&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;500&quot;</span> <span class="hljs-attr">cellspacing</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>1.1<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>1.3<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>1.4<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>1.5<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>2.1<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>2.2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>2.3<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>2.4<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>2.5<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>3.1<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>3.2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>3.3<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>3.4<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>4.1<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>4.2<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>4.3<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>4.4<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="8-常用的特殊字符集"><a href="#8-常用的特殊字符集" class="headerlink" title="8.常用的特殊字符集"></a>8.常用的特殊字符集</h5><p>一定是常用的，因为太多了，如果全写出了，那得好几个篇幅了，我知道你们不爱看，我就跳过了！<br><img src="https://img-blog.csdnimg.cn/20200405184943653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<div>


<table class="dataintable">
    <tbody><tr>
      <th style="width:10%">结果</th>
      <th style="width:50%">描述</th>
      <th style="width:20%">实体名称</th>
      <th style="width:20%">实体编号</th>
    </tr>
        <tr>
      <td> </td>
      <td>空格</td>
      <td>&amp;nbsp;</td>
      <td>&amp;#160;</td>
    </tr>
    <tr>
      <td>"</td>
      <td>引号</td>
      <td>&amp;quot;</td>
      <td>&amp;#34;</td>
    </tr>
    <tr>
      <td>'</td>
      <td>撇号&nbsp;</td>
      <td>&amp;apos;</td>
      <td>&amp;#39;</td>
    </tr>
    <tr>
      <td>&amp;</td>
      <td>和号</td>
      <td>&amp;amp;</td>
      <td>&amp;#38;</td>
    </tr>
    <tr>
      <td>&lt;</td>
      <td>小于号</td>
      <td>&amp;lt;</td>
      <td>&amp;#60;</td>
    </tr>
    <tr>
      <td>&gt;</td>
      <td>大于号</td>
      <td>&amp;gt;</td>
      <td>&amp;#62;</td>
    </tr>
</tbody></table>
</div>

<p>剩下的自己去查就完事，这时候有小伙伴要问了，换行换行!<code>&lt;br&gt;</code>我的错，我忘记说换行标签了，我错了！</p>
<h5 id="9-iframe-框架标签-内嵌窗口"><a href="#9-iframe-框架标签-内嵌窗口" class="headerlink" title="9.iframe 框架标签(内嵌窗口)"></a>9.iframe 框架标签(内嵌窗口)</h5><p>我倒是挺想写个窗口给大家演示的，但是 mark down 不允许！可惜！<br><img src="https://img-blog.csdnimg.cn/20200405190014458.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;<span class="hljs-selector-tag">body</span>&gt;<br>&lt;!<span class="hljs-attr">--ifarme</span> 标签可以在页面上开辟一个小区域显示一个单独的页面<br>ifarme 和<span class="hljs-selector-tag">a</span> 标签组合使用的步骤:<br><span class="hljs-number">1</span> 在iframe 标签中使用name 属性定义一个名称<br><span class="hljs-number">2</span> 在a 标签的target 属性上设置iframe 的name 的属性值<br>--&gt;<br>&lt;iframe src=<span class="hljs-string">&quot;https://me.csdn.net/blog/weixin_43627118&quot;</span> width=<span class="hljs-string">&quot;500&quot;</span> height=<span class="hljs-string">&quot;400&quot;</span> name=<span class="hljs-string">&quot;mubiao&quot;</span>&gt;&lt;/iframe&gt;<br>&lt;br/&gt;<br>&lt;ul&gt;<br>&lt;li&gt;&lt;a href=<span class="hljs-string">&quot;https://blog.csdn.net/weixin_43627118&quot;</span> target=<span class="hljs-string">&quot;mubiao&quot;</span>&gt;他的博文&lt;/a&gt;&lt;/li&gt;<br>&lt;li&gt;&lt;a href=<span class="hljs-string">&quot;https://blog.csdn.net/weixin_43627118/category_9800870.html&quot;</span> target=<span class="hljs-string">&quot;mubiao&quot;</span>&gt;JAVA专栏&lt;/a&gt;&lt;/li&gt;<br>&lt;li&gt;&lt;a href=<span class="hljs-string">&quot;https://blog.csdn.net/weixin_43627118/category_9800862.html&quot;</span> target=<span class="hljs-string">&quot;mubiao&quot;</span>&gt; 数据库专栏&lt;/a&gt;&lt;/li&gt;<br>&lt;/ul&gt;<br>&lt;/body&gt;<br><br></code></pre></td></tr></table></figure>

<p>可以把代码粘贴到记事本后改扩展名为 HTML 然后试一下，体验体验。<br>效果大概是这样的<br><img src="https://img-blog.csdnimg.cn/20200405190540484.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"><br><img src="https://img-blog.csdnimg.cn/20200405190745732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"></p>
<h5 id="10-表单标签"><a href="#10-表单标签" class="headerlink" title="10 表单标签"></a>10 表单标签</h5><p>表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器.</p>
<p><code>&lt;form&gt;</code> 标签就是表单</p>
<ul>
<li>input type&#x3D;text 是文件输入框 value 设置默认显示内容</li>
<li>input type&#x3D;password 是密码输入框 value 设置默认显示内容</li>
<li>input type&#x3D;radio 是单选框 name 属性可以对其进行分组 checked&#x3D;”checked”表示默认选中</li>
<li>input type&#x3D;checkbox 是复选框 checked&#x3D;”checked”表示默认选中</li>
<li>input type&#x3D;reset 是重置按钮 value 属性修改按钮上的文本</li>
<li>input type&#x3D;submit 是提交按钮 value 属性修改按钮上的文本</li>
<li>input type&#x3D;button 是按钮 value 属性修改按钮上的文本</li>
<li>input type&#x3D;file 是文件上传域</li>
<li>input type&#x3D;hidden 是隐藏域当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域(提交的时候同时发送给服务器）</li>
<li>select 标签是下拉列表框<ul>
<li>option 标签是下拉列表框中的选项 selected&#x3D;”selected”设置默认选中</li>
<li>textarea 表示多行文本输入框（起始标签和结束标签中的内容是默认值）</li>
<li>rows 属性设置可以显示几行的高度</li>
<li>cols 属性设置每行可以显示几个字符宽度</li>
</ul>
</li>
</ul>
<p><strong>给出一个样例：</strong><br><img src="https://img-blog.csdnimg.cn/20200405193530212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYyNzExOA==,size_16,color_FFFFFF,t_70" srcset="/img/loading.gif" lazyload alt="在这里插入图片描述"><br>同样的，可粘贴后自己运行体验一下啊！</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;<span class="hljs-selector-tag">form</span>&gt;<br>&lt;<span class="hljs-selector-tag">h1</span> align=&quot;center&quot;&gt;用户注册&lt;/<span class="hljs-selector-tag">h1</span>&gt;<br>&lt;<span class="hljs-selector-tag">table</span> align=&quot;center&quot;&gt;<br>&lt;<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt; 用户名称：&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">input</span> type=&quot;text&quot; value=&quot;默认值&quot;/&gt;<br>&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;/<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt; 用户密码：&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;&lt;<span class="hljs-selector-tag">input</span> type=&quot;password&quot; value=&quot;abc&quot;/&gt;&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;/<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;确认密码：&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;&lt;<span class="hljs-selector-tag">input</span> type=&quot;password&quot; value=&quot;abc&quot;/&gt;&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;/<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;性别：&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">input</span> type=&quot;radio&quot; name=&quot;sex&quot;/&gt;男<br>&lt;<span class="hljs-selector-tag">input</span> type=&quot;radio&quot; name=&quot;sex&quot; checked=&quot;checked&quot; /&gt;女<br>&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;/<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt; 兴趣爱好：&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">input</span> type=&quot;checkbox&quot; checked=&quot;checked&quot; /&gt;rap<br>&lt;<span class="hljs-selector-tag">input</span> type=&quot;checkbox&quot; /&gt;唱<br>&lt;<span class="hljs-selector-tag">input</span> type=&quot;checkbox&quot; /&gt;跳<br>&lt;<span class="hljs-selector-tag">input</span> type=&quot;checkbox&quot; /&gt;篮球<br>&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;/<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;国籍：&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;<br>&lt;select&gt;<br>&lt;option&gt;--请选择国籍--&lt;/option&gt;<br>&lt;option selected=&quot;selected&quot;&gt;中国&lt;/option&gt;<br>&lt;option&gt;美国&lt;/option&gt;<br>&lt;option&gt;小日本&lt;/option&gt;<br>&lt;/select&gt;<br>&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;/<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;自我评价：&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;&lt;<span class="hljs-selector-tag">textarea</span> rows=&quot;<span class="hljs-number">10</span>&quot; cols=&quot;<span class="hljs-number">20</span>&quot;&gt;请在此区域书写&lt;/<span class="hljs-selector-tag">textarea</span>&gt;&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;/<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span>&gt;&lt;<span class="hljs-selector-tag">input</span> type=&quot;reset&quot; /&gt;&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;<span class="hljs-selector-tag">td</span> align=&quot;center&quot;&gt;&lt;<span class="hljs-selector-tag">input</span> type=&quot;submit&quot;/&gt;&lt;/<span class="hljs-selector-tag">td</span>&gt;<br>&lt;/<span class="hljs-selector-tag">tr</span>&gt;<br>&lt;/<span class="hljs-selector-tag">table</span>&gt;<br>&lt;/<span class="hljs-selector-tag">form</span>&gt;<br>&lt;/<span class="hljs-selector-tag">body</span>&gt;<br></code></pre></td></tr></table></figure>

<p><strong>表单提交细节:</strong></p>
<p><code>&lt;form &gt;</code>标签是表单标签<br>action 属性设置提交的服务器地址<br>method 属性设置提交的方式 GET(默认值)或 POST<br>accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。<br>autocomplete 规定浏览器应该自动完成表单（默认：开启）。<br>enctype 规定被提交数据的编码（默认：url-encoded）。<br>name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。<br>novalidate 规定浏览器不验证表单。<br>target 规定 action 属性中地址的目标（默认：_self）。</p>
<p>表单提交的时候，数据没有发送给服务器的三种情况：<br>1、表单项没有 name 属性值<br>2、单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器<br>3、表单项不在提交的 form 标签中<br>GET 请求的特点是：<br>1、浏览器地址栏中的地址是：action 属性[+?+请求参数]<br>请求参数的格式是：name&#x3D;value&amp;name&#x3D;value<br>2、不安全<br>3、它有数据长度的限制<br>POST 请求的特点是：<br>1、浏览器地址栏中只有 action 属性值<br>2、相对于 GET 请求要安全<br>3、理论上没有数据长度的限制</p>
<p><strong>何时使用 GET？何时使用 POST？</strong><br>您能够使用 GET（默认方法）：<br>如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。</p>
<p>您应该使用 POST：<br>如果表单正在更新数据，或者包含敏感信息（例如密码）。<br>POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。</p>
<p>刚才的代码是不能正常提交，下面的代码经过修改时可以提交的，仔细观察一下有什么区别。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><code class="hljs css">&lt;<span class="hljs-selector-tag">form</span> action=&quot;http://localhost:<span class="hljs-number">8080</span><span class="hljs-string">&quot; method=&quot;</span>post<span class="hljs-string">&quot;&gt;</span><br><span class="hljs-string">&lt;input type=&quot;</span>hidden<span class="hljs-string">&quot; name=&quot;</span>action<span class="hljs-string">&quot; value=&quot;</span>login<span class="hljs-string">&quot; /&gt;</span><br><span class="hljs-string">&lt;h1 align=&quot;</span>center<span class="hljs-string">&quot;&gt;用户注册&lt;/h1&gt;</span><br><span class="hljs-string">&lt;table align=&quot;</span>center<span class="hljs-string">&quot;&gt;</span><br><span class="hljs-string">&lt;tr&gt;</span><br><span class="hljs-string">&lt;td&gt; 用户名称：&lt;/td&gt;</span><br><span class="hljs-string">&lt;td&gt;</span><br><span class="hljs-string">&lt;input type=&quot;</span>text<span class="hljs-string">&quot; name=&quot;</span>username<span class="hljs-string">&quot; value=&quot;</span>默认值<span class="hljs-string">&quot;/&gt;</span><br><span class="hljs-string">&lt;/td&gt;</span><br><span class="hljs-string">&lt;/tr&gt;</span><br><span class="hljs-string">&lt;tr&gt;</span><br><span class="hljs-string">&lt;td&gt; 用户密码：&lt;/td&gt;</span><br><span class="hljs-string">&lt;td&gt;&lt;input type=&quot;</span>password<span class="hljs-string">&quot; name=&quot;</span>password<span class="hljs-string">&quot; value=&quot;</span>abc<span class="hljs-string">&quot;/&gt;&lt;/td&gt;</span><br><span class="hljs-string">&lt;/tr&gt;</span><br><span class="hljs-string">&lt;tr&gt;</span><br><span class="hljs-string">&lt;td&gt;性别：&lt;/td&gt;</span><br><span class="hljs-string">&lt;td&gt;</span><br><span class="hljs-string">&lt;input type=&quot;</span>radio<span class="hljs-string">&quot; name=&quot;</span>sex<span class="hljs-string">&quot; value=&quot;</span>boy<span class="hljs-string">&quot;/&gt;男</span><br><span class="hljs-string">&lt;input type=&quot;</span>radio<span class="hljs-string">&quot; name=&quot;</span>sex<span class="hljs-string">&quot; checked=&quot;</span>checked<span class="hljs-string">&quot; value=&quot;</span>girl<span class="hljs-string">&quot; /&gt;女</span><br><span class="hljs-string">&lt;/td&gt;</span><br><span class="hljs-string">&lt;/tr&gt;</span><br><span class="hljs-string">&lt;tr&gt;</span><br><span class="hljs-string">&lt;td&gt; 兴趣爱好：&lt;/td&gt;</span><br><span class="hljs-string">&lt;td&gt;</span><br><span class="hljs-string">&lt;input name=&quot;</span>hobby<span class="hljs-string">&quot; type=&quot;</span>checkbox<span class="hljs-string">&quot; checked=&quot;</span>checked<span class="hljs-string">&quot; value=&quot;</span>java<span class="hljs-string">&quot;/&gt;唱</span><br><span class="hljs-string">&lt;input name=&quot;</span>hobby<span class="hljs-string">&quot; type=&quot;</span>checkbox<span class="hljs-string">&quot; value=&quot;</span>js<span class="hljs-string">&quot;/&gt;跳</span><br><span class="hljs-string">&lt;input name=&quot;</span>hobby<span class="hljs-string">&quot; type=&quot;</span>checkbox<span class="hljs-string">&quot; value=&quot;</span>cpp<span class="hljs-string">&quot;/&gt;rap</span><br><span class="hljs-string">&lt;input name=&quot;</span>hobby<span class="hljs-string">&quot; type=&quot;</span>checkbox<span class="hljs-string">&quot; value=&quot;</span>cpp<span class="hljs-string">&quot;/&gt;篮球</span><br><span class="hljs-string">&lt;/td&gt;</span><br><span class="hljs-string">&lt;/tr&gt;</span><br><span class="hljs-string">&lt;tr&gt;</span><br><span class="hljs-string">&lt;td&gt;国籍：&lt;/td&gt;</span><br><span class="hljs-string">&lt;td&gt;</span><br><span class="hljs-string">&lt;select name=&quot;</span>country<span class="hljs-string">&quot;&gt;</span><br><span class="hljs-string">&lt;option value=&quot;</span>none<span class="hljs-string">&quot;&gt;--请选择国籍--&lt;/option&gt;</span><br><span class="hljs-string">&lt;option value=&quot;</span>cn<span class="hljs-string">&quot; selected=&quot;</span>selected<span class="hljs-string">&quot;&gt;中国&lt;/option&gt;</span><br><span class="hljs-string">&lt;option value=&quot;</span>usa<span class="hljs-string">&quot;&gt;美国&lt;/option&gt;</span><br><span class="hljs-string">&lt;option value=&quot;</span>jp<span class="hljs-string">&quot;&gt;小日本&lt;/option&gt;</span><br><span class="hljs-string">&lt;/select&gt;</span><br><span class="hljs-string">&lt;/td&gt;</span><br><span class="hljs-string">&lt;/tr&gt;</span><br><span class="hljs-string">&lt;tr&gt;</span><br><span class="hljs-string">&lt;td&gt;自我评价：&lt;/td&gt;</span><br><span class="hljs-string">&lt;td&gt;&lt;textarea name=&quot;</span>desc<span class="hljs-string">&quot; rows=&quot;</span><span class="hljs-number">10</span><span class="hljs-string">&quot; cols=&quot;</span><span class="hljs-number">20</span><span class="hljs-string">&quot;&gt;我才是默认值&lt;/textarea&gt;&lt;/td&gt;</span><br><span class="hljs-string">&lt;/tr&gt;</span><br><span class="hljs-string">&lt;tr&gt;</span><br><span class="hljs-string">&lt;td&gt;&lt;input type=&quot;</span>reset<span class="hljs-string">&quot; /&gt;&lt;/td&gt;</span><br><span class="hljs-string">&lt;td align=&quot;</span>center<span class="hljs-string">&quot;&gt;&lt;input type=&quot;</span>submit<span class="hljs-string">&quot;/&gt;&lt;/td&gt;</span><br><span class="hljs-string">&lt;/tr&gt;</span><br><span class="hljs-string">&lt;/table&gt;</span><br><span class="hljs-string">&lt;/form&gt;</span><br><span class="hljs-string">&lt;/body&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="11-其他标签"><a href="#11-其他标签" class="headerlink" title="11.其他标签"></a>11.其他标签</h5><div></div> 标签默认独占一行
span 标签它的长度是封装数据的长度
p 段落标签默认会在段落的上方或下方各空出一行来（如果已有就不再空）
 
<p> <strong>看下边：</strong></p>
<div>div 标签1</div>
<div>div 标签2</div>
<span>span 标签1</span>
<span>span 标签2</span>
<p>p 段落标签1</p>
<p>p 段落标签2</p>

<p>你看这个像什么！<br>░░░░░░░░░░░▄▄<br>░░░░░░░░░░░█░█<br>░░░░░░░░░░░█░█<br>░░░░░░░░░░█░░█<br>░░░░░░░░░█░░░█<br>███████▄▄█░░░██████▄<br>▓▓▓▓▓▓█░░░░░░░░░░░░█<br>▓▓▓▓▓▓█░░░░░░░░░░░░█<br>▓▓▓▓▓▓█░░░░░░░░░░░░█<br>▓▓▓▓▓▓██████████████</p>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/Web/" class="category-chain-item">Web</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>『Web』HTML-HTML入门篇（我想10分钟入门HTML，可以，交给我吧）</div>
      <div>http://example.com/2023/12/06/『Web』HTML-HTML入门篇（我想10分钟入门HTML，可以，交给我吧）/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>Chiam</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年12月6日</div>
        </div>
      
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a class="print-no-link" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2023/12/06/%E3%80%8EWeb%E3%80%8FJaba_Web-JDBC%20%E4%BF%AE%E6%94%B9%E8%AE%B0%E5%BD%95%E6%93%8D%E4%BD%9C%E6%A8%A1%E6%9D%BF/" title="『Web』Jaba_Web-JDBC 修改记录操作模板">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">『Web』Jaba_Web-JDBC 修改记录操作模板</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2023/12/06/%E3%80%8EWeb%E3%80%8FEclipse%E4%B8%AD%E8%8E%B7%E5%8F%96html%20jsp%20%E6%A0%87%E7%AD%BE%E7%9A%84%E5%B1%9E%E6%80%A7%E6%8F%90%E7%A4%BA%E4%BF%A1%E6%81%AF%E6%96%B9%E6%B3%95/" title="『Web』Eclipse中获取html jsp 标签的属性提示信息方法">
                        <span class="hidden-mobile">『Web』Eclipse中获取html jsp 标签的属性提示信息方法</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
  
  
    <article id="comments" lazyload>
      
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('https://lib.baomitu.com/valine/1.5.1/Valine.min.js', function() {
        var options = Object.assign(
          {"appId":"fIfc7WqUDZohlQuPc2lz5mJy-MdYXbMMI","appKey":"zjlAG3ZA3o4cBHVAkjzc2Z20","path":"window.location.pathname","placeholder":"留言仅限讨论，禁止广告等行为","avatar":"retro","meta":["nick","mail","link"],"requiredFields":[],"pageSize":10,"lang":"zh-CN","highlight":false,"recordIP":false,"serverURLs":"https://fifc7wqu.api.lncldglobal.com","emojiCDN":null,"emojiMaps":null,"enableQQ":false},
          {
            el: "#valine",
            path: window.location.pathname
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          var imgSelector = '#valine .vcontent img:not(.vemoji)';
          Fluid.plugins.imageCaption(imgSelector);
          Fluid.plugins.fancyBox(imgSelector);
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


    </article>
  


          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <meta name="referrer" content="no-referrer" /> <footer id="footer" role="contentinfo"> <div class="divider"> <div class="wall"></div> <img class="animals" src="/img/footer_animals_new.png" srcset="/img/loading.gif" lazyload alt="Footer Animals"> </div> <div class="container" data-index="450"> <p> <a href="https://chiamzhang.github.io" target="_blank">DogEgg</a> <i class="iconfont icon-love"></i> <a href="#" target="_blank">LittePig</a> </p> <p> Powered by  <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-pen"></i> Theme  <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> </p> </div> </footer> 
    </div>
  
  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.4/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.20.1/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>




  
<script src="/js/love.js"></script>
<script src="/js/funnyTitle.js"></script>
<script src="/js/backTop.js"></script>
<script src="//cdn.jsdelivr.net/gh/bynotes/texiao/source/js/xiaoxuehua.js"></script>



<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"left","width":150,"height":150,"hOffset":20,"vOffset":0},"mobile":{"show":false,"scale":0.5},"react":{"opacity":0.9},"log":false});</script></body>
</html>
